import { v4 as uuidv4 } from 'uuid';
import { activeComponent } from './use-editor';
let draggingComponent = null;
const updateDragovering = (el, status) => {
  el.setAttribute('dragovering', status);
};
//拖动组件开始事件
const handleDragstart = (e, component) => {
  draggingComponent = component;
};
//在可拖动区域拖动事件
const handleDragover = (e) => {
  console.log(2222);
  e.preventDefault();
  updateDragovering(e.target, true);
};
//离开放置目标时被触发
const handleDragleave = (e) => {
  e.preventDefault();
  updateDragovering(e.target, false);
};
//组件放置目标上时触发
const handleDrop = (e, data) => {
  const component = {
    id: uuidv4(),
    name: draggingComponent.name,
    config: {
      props: { ...draggingComponent.config.props },
      style: {
        left: e.offsetX,
        top: e.offsetY,
      },
    },
  };
  data.value.components.push(component);
  activeComponent.value = component;
  updateDragovering(e.target, false);
  draggingComponent = null;
};

export { handleDragstart, handleDragover, handleDrop, handleDragleave };
